<template>
  <view class="sign-record-container">
    <view class="header">
      <view class="title">签到记录</view>
      <view class="subtitle">查看历史签到详情</view>
    </view>
    
    <view class="records-list">
      <!-- 空状态显示 -->
      <view v-if="recordList.length === 0" class="empty-state">
        <image src="../../static/imges/empty.png" class="empty-icon"></image>
        <text>暂无签到记录</text>
      </view>
      
      <!-- 签到记录列表 -->
      <view 
        v-for="(item, index) in recordList" 
        :key="index" 
        class="record-card"
      >
        <view class="card-header">
          <view class="sign-type-badge" :class="{'location': item.signType === 1, 'face': item.signType === 2}">
            <text>{{ item.signTypeName }}</text>
          </view>
          <view class="lesson-name">{{ item.lessonName }}</view>
        </view>
        
        <view class="card-content">
          <view class="info-item">
            <view class="info-label">
              <image src="../../static/imges/time.png" class="info-icon"></image>
              <text>签到时间</text>
            </view>
            <view class="info-value">{{ item.signTime }}</view>
          </view>
          
          <view class="info-item" v-if="item.signAddress">
            <view class="info-label">
              <image src="../../static/imges/location.png" class="info-icon"></image>
              <text>签到地点</text>
            </view>
            <view class="info-value">{{ item.signAddress || '未记录' }}</view>
          </view>
        </view>
        
        <view class="card-footer">
          <text class="footer-text">签到成功</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js';
export default {
  data() {
    return {
      recordList: [],
    }
  },
  onLoad(option){
    this.getSignList();
  },
  methods:{
    getSignList(){
      request.post("/sign/list")
      .then(res=>{
        let data = res.data;
        this.recordList = data.map(v=>{
          console.log(v);
          if(v.signType == 1){
            v.signTypeName = '定位签到';
          }else if(v.signType == 2){
            v.signTypeName = '人脸签到';
          }
          console.log('签到方式:',v.signTypeName);
          return v;
        });
        console.log('recordList:',this.recordList);
      })
      .catch(err => {
        console.error('获取签到记录失败:', err);
        uni.showToast({
          title: '获取记录失败',
          icon: 'none'
        });
      });
    },
    formatDate(dateString) {
      if (!dateString) return '';
      try {
        const date = new Date(dateString);
        return date.toLocaleString();
      } catch (e) {
        return dateString;
      }
    }
  }
}
</script>

<style>
.sign-record-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 30rpx;
}

.header {
  background: linear-gradient(to right, #4f99ff, #6ba6ff);
  padding: 40rpx 30rpx 60rpx;
  color: #fff;
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(79, 153, 255, 0.2);
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  opacity: 0.9;
}

.records-list {
  padding: 20rpx 30rpx;
  margin-top: -30rpx;
}

.record-card {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.sign-type-badge {
  padding: 6rpx 16rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  color: white;
}

.sign-type-badge.location {
  background-color: #4caf50;
}

.sign-type-badge.face {
  background-color: #ff9800;
}

.lesson-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.card-content {
  padding: 20rpx 30rpx;
}

.info-item {
  display: flex;
  margin-bottom: 16rpx;
}

.info-label {
  display: flex;
  align-items: center;
  width: 180rpx;
  font-size: 26rpx;
  color: #666;
}

.info-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
}

.info-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.card-footer {
  padding: 16rpx 30rpx;
  background-color: #f6ffed;
  border-top: 1px solid #b7eb8f;
  text-align: center;
}

.footer-text {
  font-size: 24rpx;
  color: #52c41a;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
  opacity: 0.5;
}
</style>
